<template>
  <div>
    <el-row :gutter="20">
      <!-- button组件 展示按钮 -->
      <el-col :span="3"
        ><div class="grid-content bg-purple">
          <!-- 注册点击事件，通过判断state状态切换按钮内容 -->
          <!-- 注册点击事件，通过$router.back()返回上一步 -->
          <el-button size="small" type="primary" round @click="buttonEvent">
            点我显示button</el-button
          >
        </div>
      </el-col>
      <!-- layout组件 展示按钮 -->
      <el-col :span="3"
        ><div class="grid-content bg-purple">
          <!-- 注册点击事件，通过$router.back()返回上一步 -->
          <el-button size="small" type="success" round @click="buttonEvent">
            点我显示layout
          </el-button>
        </div></el-col
      >
      <!-- container组件 展示按钮 -->
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <router-link to="/container">
            <!-- 注册点击事件，通过$router.back()返回上一步 -->
            <el-button size="small" type="info" round @click="buttonEvent">
              点我显示container
            </el-button>
          </router-link>
        </div>
      </el-col>
      <!-- link链接组件 展示按钮 -->
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <router-link to="/link">
            <!-- 注册点击事件，通过$router.back()返回上一步 -->
            <el-button size="small" type="primary" plain @click="buttonEvent">
              点我显示link
            </el-button>
          </router-link>
        </div>
      </el-col>
      <!-- icon字体图标组件 展示按钮-->
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <router-link to="/icon">
            <!-- 注册点击事件，通过$router.back()返回上一步 -->
            <el-button size="small" type="warning" round @click="buttonEvent">
              点我显示icon
            </el-button>
          </router-link>
        </div>
      </el-col>
      <!-- radio单选框组件展示按钮 -->
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <router-link to="/radio">
            <!-- 注册点击事件，通过$router.back()返回上一步 -->
            <el-button size="small" type="danger" circle @click="buttonEvent">
              点我显示radio
            </el-button>
          </router-link>
        </div>
      </el-col>
      <!-- checkbox复选框组件展示按钮 -->
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <router-link to="/checkbox">
            <!-- 注册点击事件，通过$router.back()返回上一步 -->
            <el-button size="small" type="success" circle @click="buttonEvent">
              点我显示checkbox
            </el-button>
          </router-link>
        </div></el-col
      >
      <!--  input 输入框展示按钮  -->
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <router-link to="/input">
            <!-- 注册点击事件，通过$router.back()返回上一步 -->
            <el-button size="small" type="danger" round @click="buttonEvent">
              点我显示input
            </el-button>
          </router-link>
        </div></el-col
      >
    </el-row>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component({ components: {} })
export default class Home extends Vue {
  private buttonEvent(event: any) {
    const routesList: string[] = this.$router
      .getRoutes()
      .map((el) => el.path);
    routesList.pop();
    routesList.forEach((el) => {
      const aa: any = el.split('');
      (aa as string[]).shift();
      let bb: any = aa;
      bb = (bb as string[]).join('');
      if (event.target.textContent.includes(bb)) {
        this.$router.push(el);
      }
    });
  }
}
</script>
<style lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #fff;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>